<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>常用工具</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
        <li class="nav-item">
            <a class="nav-link active" data-toggle="tab" href="#removeRepeatStr">字符串去重</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#formatParams">Params格式化</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#formatJson">json格式化</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#formatData">时间戳格式化</a>
        </li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
        <!--定时关闭弹窗-->
        <div class="alert" style="font-size:12px;color: #8bc34a;position: absolute;top: 19%;left: 10%;"></div>
        <!--格式化参数，比如sql查询条件中的varchar 或者 int-->
        <div id="removeRepeatStr" class="container tab-pane active" style="margin-top: 10px;">
            <div class="repeatDiv" id="repeatDiv">
                <label for="repeatStr"></label><textarea cols="100" rows="15" id="repeatStr" name="contactus"></textarea>
            </div>
            <div class="repeatBtnDiv" id="repeatBtnDiv" style="margin-top: 5px;">
                <button style="cursor: pointer;background-color: #0094ff;border: 1px solid;border-radius: 6px;color: white;font-size: 14px;width: 75px;"
                        onclick="removeRepeat()">去除重复</button>
                <button style="cursor: pointer;background-color: #0094ff;border: 1px solid;border-radius: 6px;color: white;font-size: 14px;width: 55px;"
                        onclick="copyParams('#repeatStrShow')" id="copyRemoveRepeatStr">复制</button>
                <button style="cursor: pointer;background-color: #0094ff;border: 1px solid;border-radius: 6px;color: white;font-size: 14px;width: 55px;"
                        onclick="clearParams('#repeatStr','#repeatStrShow')" id="clearRepeatStr">清空</button>
            </div>
            <div class="removeRepeatStrDiv" id="removeRepeatStrDiv" style="margin-top: 5px;">
                <label for="repeatStrShow"></label><textarea cols="100" rows="15" id="repeatStrShow" name="outputShow"></textarea>
            </div>
        </div>
        <!--格式化参数，比如sql查询条件中的varchar 或者 int-->
        <div id="formatParams" class="container tab-pane" style="margin-top: 10px;">
            <label for="sid"></label>
            <select id="sid" style="margin-top: 5px;-webkit-appearance: auto !important;background-color: #0094ff;color: white;border: 1px solid;border-radius: 5px;">
                <option value="1">字符串</option>
                <option value="2">数字</option>
            </select>
            <div class="formatParamsDiv" id="formatParamsDiv" style="margin-top: 5px;">
                <div class="inputDiv" id="inputDiv">
                    <label for="contactus"></label><textarea cols="100" rows="15" id="contactus" name="contactus"></textarea>
                </div>
                <div class="formatDiv" id="formatDiv" style="margin-top: 5px;">
                    <button style="cursor: pointer;background-color: #0094ff;border: 1px solid;border-radius: 6px;color: white;font-size: 14px;width: 65px;"
                            onclick="formatParams()">格式化</button>
                    <button style="cursor: pointer;background-color: #0094ff;border: 1px solid;border-radius: 6px;color: white;font-size: 14px;width: 55px;"
                            onclick="copyParams('#outputShow')" id="copyParams">复制</button>
                    <button style="cursor: pointer;background-color: #0094ff;border: 1px solid;border-radius: 6px;color: white;font-size: 14px;width: 55px;"
                            onclick="clearParams('#contactus','#outputShow')" id="clearParams">清空</button>
                </div>
                <div class="outputDiv" id="outputDiv" style="margin-top: 5px;">
                    <label for="outputShow"></label><textarea cols="100" rows="15" id="outputShow" name="outputShow"></textarea>
                </div>
            </div>
        </div>
        <!--Json格式化-->
        <div id="formatJson" class="container tab-pane fade" style="margin-top: 10px;">
                <button style="cursor: pointer;background-color: #0094ff;border: 1px solid;border-radius: 6px;color: white;font-size: 14px;width: 65px;"
                        onclick="formatJson()">格式化</button>
                <button style="cursor: pointer;background-color: #0094ff;border: 1px solid;border-radius: 6px;color: white;font-size: 14px;width: 55px;"
                        onclick="copyParams('#formatJsonShow')" id="copyJson">复制</button>
                <button style="cursor: pointer;background-color: #0094ff;border: 1px solid;border-radius: 6px;color: white;font-size: 14px;width: 55px;"
                        onclick="clearParams('#formatJsonShow', '')">清空</button>
            <textarea cols="130" rows="30" id="formatJsonShow" name="formatJsonShow" style="margin-top: 10px;"></textarea>
        </div>
        <!--时间戳转换-->
        <div id="formatData" class="container tab-pane fade" style="margin-top: 10px;">
            <label>
                时间戳：
                <input type="text" name="timestamp1" id="timestamp1" style="border: 1px solid #2196f3;border-radius: 5px;">
            </label>
            <button style="cursor: pointer;background-color: #0094ff;border: 1px solid;border-radius: 6px;color: white;font-size: 14px;width: 55px;"
                    onclick="convertToData()" id="convertToData">转换</button>
            <label>
                日&nbsp;&nbsp;&nbsp;期：
                <input type="text" name="time1" id="time1" style="border: 1px solid #2196f3;border-radius: 5px;">
            </label>
            <br/><br/>
            <label>
                日&nbsp;&nbsp;&nbsp;期：
                <input type="text" name="time2" id="time2" style="border: 1px solid #2196f3;border-radius: 5px;">
            </label>
            <button style="cursor: pointer;background-color: #0094ff;border: 1px solid;border-radius: 6px;color: white;font-size: 14px;width: 55px;"
                    onclick="convertToTimestamp()" id="convertToTimestamp">转换</button>
            <label>
                时间戳：
                <input type="text" name="timestamp2" id="timestamp2" style="border: 1px solid #2196f3;border-radius: 5px;">
            </label>
        </div>
    </div>
</div>
<script>
    // 复制功能
    function copyParams(copyID) {
        let text = $(copyID);
        text.select();
        document.execCommand("Copy");
        $('.alert').html('复制成功').addClass('alert-success').show().delay(1000).fadeOut();
    }

    function clearParams(clear1,clear2) {
        $(clear1).val("");
        $(clear2).text("");
    }

    function removeRepeat() {
        let text = $("#repeatStr").val();
        let array = text.split("\n");
        let newStr = "";
        for(let i=0;i<array.length;i++){
            if(newStr.indexOf(array[i])===-1){
                newStr+=array[i] + "\n";
            }
        }
        $("#repeatStrShow").text(newStr);
    }
    // ---格式化参数，比如sql查询条件中的varchar 或者 int 事件开始---
    function formatParams() {
        let text = $("#contactus").val();
        let array = text.split("\n");
        let selType = $("#sid").val();
        // 字符串处理
        if (text.length !== 0 && selType === "1") {
            for (let i = 0; i < array.length; i++) {
                array[i] = "'" + array[i] + "'";
            }
        } else {
            for (let i = 0; i < array.length; i++) {
                array[i] = array[i];
            }
        }
        $("#outputShow").text(array);
    }
    // ---格式化参数，比如sql查询条件中的varchar 或者 int 事件结束---
    // ---Json格式化 开始---
    function formatJson(){
        let resp = $("#formatJsonShow");
        try {
            let format_data = JSON.stringify(JSON.parse(resp.val()), null, 4);
            resp.val("");
            resp.val(format_data);
        } catch (err) {
            alert("格式化失败,请检查格式")
        }
    }
    // ---Json格式化 结束---
    // ---时间戳转换 开始---
    function convertToData() {
        let timestamp = $("#timestamp1").val();
        // 时间戳为10位需*1000，时间戳为13位的话不需乘1000
        if (timestamp.length === 13) {
            timestamp = timestamp.substr(0,10);
        }
        let date = new Date(timestamp * 1000);
        let Y = date.getFullYear() + '-';
        let M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
        let D = date.getDate() + ' ';
        let h = date.getHours() + ':';
        let m = date.getMinutes() + ':';
        let s = date.getSeconds();
        $("#time1").val(Y+M+D+h+m+s);
    }
    function convertToTimestamp() {
        let time2 = $("#time2").val();
        let date = new Date(time2);
        // 有三种方式获取
        let timestamp = date.getTime();
        $("#timestamp2").val(timestamp);
    }
    // ---时间戳转换 结束---
</script>
</body>
</html>